<template>
 <div class="wrapper">
  <swiper :options="swiperOption"  v-if="showSwapper">
    <!-- slides -->
    <swiper-slide v-for="item of swiperList" :key="item.id">
        <img class="swiper-img" :src="item.imgUrl" />
    </swiper-slide>   
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
 </div> 
</template>
<script>
export default {
  props:{
    swiperList:{
      type:Array
    }
  },
  computed:{
    showSwapper(){
      return this.swiperList.length
    }
  },
 data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        loop: true
      },
      // swiperList: [{
      //     id:"001",
      //     imgurl:'https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20195/b221705ffe80df79c76408aa78bc466f.jpg_890x330_7cd41f6b.jpg'
      // },{
      //     id:"002",
      //     imgurl:'https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20195/4cf92fd4010e46d9e2698e89d08c5708.jpg_890x330_3f24e836.jpg'
      // }]
    }
  },
};
</script>
<style lang="stylus" scoped>
.wrapper >>> .swiper-pagination-bullet-active{
  background :#fff !important
}
.wrapper{
    overflow: hidden;
    width :100%;
    height :0;
    padding-bottom 31.25%;
    background : #eee;
    .swiper-img{
      width:100%;
  }
}
</style>
